<!--
  - Yang Shuai  Copyright (c) 2022 https://yby6.com.
  - Copyright (c) 2022. Yangbuyi, personal projects are not allowed to be commercialized without permission.
  - Please keep the information of the original author of the code. Thank you
  -
  -->

<template>
  <div class="order">
    <div class="um-order-ux-order-v2-ct-top">
      <div class="um-order-ux-order-v2-ct-top-title">
        <h1>确认订单信息</h1>
        <h4>请在2小时内完成支付，否则订单会被自动取消</h4>
      </div>

      <div class="um-order-ux-order-account f-cb">
        <div class="um-order-ux-order-account_avatar f-fl">
          <img :src="loginInfo.avatar">
        </div>
        <div class="um-order-ux-order-account_info f-fl">
          <div class="um-order-ux-order-account_info_nickName">购买帐号：{{ loginInfo.nickname }}</div>
          <!--Regular if16-->
          <div class="um-order-ux-order-account_info_tips">
            注意：购买后不支持退款、转让，请确认开课时间或有效期后再提交订单
          </div>
        </div>

      </div>
      <div class="um-order-ux-order-v2-pay-method">
        <div class="um-order-ux-order-v2-pay-method_head">支付方式</div>
        <div class="um-order-ux-order-v2-pay-method_body">

          <div  class="order-v2-pay_current f-cb"
            @click="selectPay(true)"
            :class="{'orderBtn': this.payType}">
            <span class="order-v2-pay_current_icon current_icon_alipay f-fl"></span>
            <span class="order-v2-pay_current_type f-fl">支付宝</span>
          </div>

          <div class="order-v2-pay_current f-cb"
            @click="selectPay(false)"
            :class="{'orderBtn': !this.payType}">
          <span class="order-v2-pay_current_icon-wx current_icon_alipay f-fl"></span>
            <span class="order-v2-pay_current_type f-fl">微信</span>
          </div>
        </div>
      </div>


      <div class="um-order-ux-order-school-list">
        <div class="um-order-ux-order-school-list_title">购买课程</div>
        <div class="um-order-ux-order-school-list_list">
          <div class="um-order-ux-order-school">
            <div class="um-order-ux-order-school_courselist">
              <div class="um-order-ux-order-course">
                <div class="um-order-ux-order-course_card f-cb">
                  <div class="um-order-ux-order-course_card_img f-fl">
                    <a class="">
                      <img width="150px" height="80px" :src="order.contentCover">
                    </a>
                  </div>
                  <div class="um-order-ux-order-course_card_body f-fl">
                    <a class="title">
                      <span>{{ order.contentTitle }}</span>
                    </a>
                    <div class="time">永久可看</div>
                    <div class="promotion"></div>
                  </div>
                  <div class="um-order-ux-order-course_card_price f-fr">￥{{ order.totalFee }}</div>
                </div>
              </div>

            </div>

          </div>

        </div>
      </div>

    </div>
    <div class="um-order-ux-order-v2-ct-bottom um-order-ux-order-v2-ct-bottom_fixed" style="left: 471.5px;">
      <!--Regular if47-->
      <div class="um-order-ux-order-v2-go-pay f-cb f-pr">
        <form action="/pay/orderRedirectPage.htm" name="payForm">
          <input type="hidden" name="orderUrl">
        </form>
        <div class="um-order-ux-order-v2-go-pay_protocol f-pa">
          提交订单则表示您同意
          <!--          <span class="um-order-ux-order-v2-go-pay_protocol_btn">《疯码视频用户服务协议》</span>、-->
          <!--          <span class="um-order-ux-order-v2-go-pay_protocol_btn">《疯码视频售后政策》</span>等-->
        </div>
        <div class="um-order-ux-order-v2-go-pay_content f-fr">
          <div class="um-order-ux-order-v2-go-pay_content_price">
            <span class="v2-go-pay_content_price_title">实付:</span>
            <span class="v2-go-pay_content_price_account">
                <span class="v2-go-pay_content_price_account_icon">￥</span>{{ order.totalFee }}
            </span>
          </div>
          <a class="um-order-ux-order-v2-go-pay_content_btn" @click="payClick">立即支付</a>
        </div>
      </div>
    </div>
    <!-- 微信支付二维码 -->
    <el-dialog
      :visible.sync="codeDialogVisible"
      :show-close="false"
      @close="closeDialog"
      :width="widthBox"
      center>
      <div style="display: flex">
        <div>
          {{codeUrl}}
          <qriously :value="codeUrl" :size="300" />
          <div class="line">请打开手机微信，扫一扫完成支付</div>
        </div>
        <div class="comp-wxpay-qrcode-tip">
          <img src="https://qiniu.staticfile.org/static/wxpay_tip-ac45fc3d17795a22330c.png" title="" style="">
        </div>

      </div>
    </el-dialog>

  </div>
</template>
<script>
import 'assets/css/order.css'
import cookie from "js-cookie";
import orderApi from "@/api/order";
import wxPayApi from "@/api/wxPay";

export default {
  layout: 'default',
  asyncData({params, error}) {
    console.log("_old: ",params);
    return orderApi.getOrdersInfo(params.oid).then(response => {
      return {
        order: response.data.rows, // 订单ID
        contentId: params.oid, // 作品ID
      }
    })
  },
  created() {
    this.showInfo();
  },
  data() {
    return {
      // 350px
      widthBox: '350px',
      codeUrl: '', // 二维码
      orderNo: '', //订单号
      timer: null, // 定时器
      payBtnDisabled: false, //确认支付按钮是否禁用
      codeDialogVisible: false, //微信支付二维码弹窗

      loginInfo: {
        avatar: '',
        nickname: ''
      },
      payType: true,
    }
  },
  methods: {
    showInfo() {
      var jsonStr = cookie.get("portal_user");
      if (jsonStr) {
        this.loginInfo = JSON.parse(jsonStr)
      }
    },
    // 查询订单状态
    queryOrderStatus() {
      orderApi.getOrdersInfo(this.orderNo).then(response => {
        console.log('查询订单状态：' + response.code)

        // 支付成功后的页面跳转
        if (response.data.rows.status === 1) {
          this.closeDialog()
          this.$notify.success("支付成功");
          // 三秒后跳转到订单列表
          setTimeout(() => {
            // 刷新页面
            // 支付成功之后，跳转作品页面
            this.$router.push({path: '/video/' + this.order.contentId})
          }, 1500)
        }
      })
    },
    //关闭微信支付二维码对话框时让“确认支付”按钮可用
    closeDialog() {
      console.log('close.................')
      this.payBtnDisabled = false
      console.log('清除定时器')
      clearInterval(this.timer)
    },
    // 监听支付
    payClick() {
      if (this.payType) {
        orderApi.aliPay(this.order.orderNo).then(response => {
          //支付的时候, 支付宝会给我们返回支付页面
          $('body').html(response.data.form);
        })
      } else {
         console.log("微信支付启动");
        //调用统一下单接口
        wxPayApi.nativePay(this.order.contentId).then(response => {
          this.codeUrl = response.data.rows.codeUrl
          this.orderNo = response.data.rows.orderNo
          //打开二维码弹窗
          this.codeDialogVisible = true
          //启动定时器
          this.timer = setInterval(() => {
            //查询订单是否支付成功
            this.queryOrderStatus()
          }, 1000)

        })
      }
    },
    // 支付类型
    selectPay(type) {
      this.payType = type
    },

  }
}
</script>
<style scoped>
.order-pay {
  margin-bottom: 5px;
}

.order-v2-pay_current_icon-wx {
  width: 32px;
  height: 32px;
  background: url(//yktcdn.stu.126.net/so/res/img/pay.png?d6f7c2f…) no-repeat 0 -148px;
}

.order-v2-pay_current{
  padding-left: 5px;
  border: 1px solid white;
}

.orderBtn {
  border-color: #f39800;
}


.comp-wxpay-qrcode-tip{
  display: none;
}

.line{
  width: 300px;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
  color: #fff;
  background-color: #00c800;
}

@media screen and (min-width: 1000px) {
  .comp-wxpay-qrcode-tip{
    display: block;
    margin-left: 40px;
    margin-top: 5px;
  }


  .comp-wxpay-qrcode-tip>img {
    width: 240px;
    height: 300px;
  }

}

</style>
